<template>
  <el-card body-style="height:auto" class="box-card">
    <div slot="header" class="clearfix">
      <span style="float: left">Activity(活动) 注册表</span>
      <div style="padding: 0;float: right ">
        <el-input
          style="width: 60% ;"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"

          v-model="activityName">
        </el-input>
        <el-button type="primary" icon="el-icon-search" v-on:click="getActivity" style="margin-left: 2%">搜索</el-button>
      </div>
      <el-button style="float: right;" type="primary" v-on:click="activity(null)">注册activity</el-button>
    </div>
    <div class="clearfix">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="activityId"
          label="activityId"
          min-width=50%>
        </el-table-column>
        <el-table-column
          label="name"
          min-width=50%>
          <template slot-scope="scope">
            <json-viewer :value="JSON.parse(scope.row.name)"></json-viewer>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="description"
          min-width=50%>
        </el-table-column>
        <el-table-column
          prop="type"
          label="type"
          min-width=50%>
        </el-table-column>
        <el-table-column prop="" label="">
          <template slot-scope="scope">
            <el-button type="primary" round v-on:click="activity(scope.row.activityId)">修改</el-button>
            <el-button type="danger" round v-on:click="del(scope.row.activityId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next"
        :total="this.totalElements">
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
  import ActivityRegistryForm from "../../message/registry/ActivityRegistryForm"

  export default {

    mounted: function () {
      this.getActivity()
    },
    data() {
      return {
        activityName:'',
        currentPage: 1,
        pageSize: 10,
        totalElements: 0,
        tableData: [{
          name:{}
        }]
      }
    },
    components: {
      "v-form": ActivityRegistryForm
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 0
        this.getActivity()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getActivity()
      },
      getActivity(){
        this.$axios.get("/activity/api/page", {
          params: {
            name: this.activityName,
            currentPage: this.currentPage - 1,
            pageSize: this.pageSize
          }
        }).then(successResponse => {
          this.tableData = successResponse.data.content
          this.pageSize = successResponse.data.pageable.pageSize
          this.totalElements = successResponse.data.totalElements
          console.log(successResponse.data)
        }).catch(failResponse => {
        })
      },
      activity(activityId){
        this.$msgbox({
          message: <v-form ref="ActivityRegistryForm"></v-form>,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          data: activityId,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$refs.ActivityRegistryForm.submitForm()
          location.reload()
        }).catch(msg => {
          console.log(msg)
          if (msg == "cancel") {
            this.$refs.ActivityRegistryForm.resetForm()
            location.reload()
            this.$message.info("已取消")
          } else {
            this.$message.error(msg)
          }
        });
      },
      del(activityId){
        console.log(activityId)
        let url="/activity/"
        this.$axios.delete(url,{params:{
            activityId:activityId
          }}).then(successResponse => {
          location.reload()
        }).catch(failResponse => {
        })
      },
    }
  }
</script>
<style>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    height: auto;
  }

  .block {

  }
</style>
